<template>
    <div class="home">
        <block-loading :loading="blockLoading">
            <van-row type="flex" justify="space-between" class="banner">
                <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_run_r.png')"/>
                <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
            </van-row>
            <van-cell-group class="main_panel">
                <div class="operate_bar">
                    <h3 class="title">班级管理</h3>
                    <van-button plain  round  class="add_class_btn" icon="plus" size="small" type="warning" @click="addOrUpdateHandle()">添加班级 </van-button>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>班级名称</th>
                        <th>班级类型</th>
                        <th>最弱项</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in classList">
                        <td>{{item.class_name}}</td>
                        <td>{{item.type | setLabel(typeColumns)  }}</td>
                        <td>{{item.weakest | setLabel(weakColumns) }}</td>
                        <td><van-icon name="edit" class="edit_btn"   @click="addOrUpdateHandle(item)" /></td>
                    </tr>
                    </tbody>
                </table>
            </van-cell-group>
        </block-loading>
        <class-update-or-add
                ref="addOrUpdate"
                :typeColumns="typeColumns"
                :weakColumns="weakColumns"
                v-if="addOrUpdateVisible"
                @refreshDataList="getClassList"/>
    </div>
</template>

<script>
// @ is an alias to /src
import $api from "@/api/index"
import classUpdateOrAdd from './components/class_try_update_or_add.vue'
export default {
  name: "courseBuy",
  components: {classUpdateOrAdd},
  filters: {
    setLabel(value,ArrayObj) {
      const i =ArrayObj.findIndex(item => item.value===value)
      return ArrayObj[i].label
    }
  },
  data() {
    return {
      classList: [],
      addOrUpdateVisible:false,
      formData: {
        openid: '',
        class_num: 1,
        course: '2'
      },
      weakColumns: [
        {label:"下肢力量",value:"xz"},
        {label:"上肢力量",value:"sz"},
        {label:"平衡性",value:"ph"},
        {label:"柔韧性",value:"rr"},
        {label:"灵敏性",value:"lm"},
        {label:"协调性",value:"xt"},
      ],
      typeColumns: [
        {label:"大班",value:"1"},
        {label:"中班",value:"2"},
        {label:"小班",value:"3"},
      ],
      btnLoading: false,
      blockLoading: false,
    };
  },
  created() {
//    this.getClassList()
  },

  methods: {
    // 获取班级列表
    async getClassList(){
      const res = await $api.school.getClassList({code: this.code})
      this.classList = res.data
    },
    // 新增 / 修改
    addOrUpdateHandle(record) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(record)
      })
    },
  },
};
</script>
<style lang="scss" scoped>
    ::v-deep {
        .banner .banner_left {
            width: 344px;
            height: 298px;
            margin-top: 18px;
            margin-left: 27px;
        }
        .main_panel {
            padding: 30px 10px;
            margin-top: -30px;
            .operate_bar{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
                .title{
                    margin: 0;
                    font-size: 28px;
                    font-weight: bold;
                    color: #333333;
                    line-height: 36px;
                }
                .add_class_btn{
                    height: 44px;
                    font-size: 24px;
                    padding: 0 20px;
                }
            }
        }
        .table{
            margin-top: 30px;
            width: 100%;
            font-size: 26px;
            color: #333;
            border-collapse: collapse;
            th,td{
                text-align: center;
                vertical-align: middle;
            }
            th{
                background-color: #FDF4F0;
                height: 66px;
            }
            td{
                height: 90px;
                line-height: 90px;
            }
            tr:nth-child(2n){
                background-color: #F7F8FD;
            }
            .edit_btn{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 46px;
                &:active{
                    background-color: #ccc;
                }
            }
        }
    }
</style>
